<template>
    <div :class="`tech-shop-order-list ${mode}`">
        <Tabs class="list-tabs" v-model="active" sticky @change="tabChagneAction" :color="theme">
            <Tab title="全部">
                <div class="shop-order-list" v-if="orderList.length > 0">
                    <template v-for="(item, index) in orderList">
                        <OrderListItem :key="index" :itemInfo="item" @refreshList="getDataList" />
                    </template>
                </div>
                <Empty v-else type="order" msg="暂无订单" :mode="mode" />
            </Tab>
            <Tab title="待支付">
                <div class="shop-order-list" v-if="orderList.length > 0">
                    <template v-for="(item, index) in orderList">
                        <OrderListItem :key="index" :itemInfo="item" @refreshList="getDataList" />
                    </template>
                </div>
                <Empty v-else type="order" msg="暂无待支付订单" :mode="mode" />
            </Tab>
            <Tab title="待备/发货">
                <div class="shop-order-list" v-if="orderList.length > 0">
                    <template v-for="(item, index) in orderList">
                        <OrderListItem :key="index" :itemInfo="item" @refreshList="getDataList" />
                    </template>
                </div>
                <Empty v-else type="order" msg="暂无待备/发货订单" :mode="mode" />
            </Tab>
            <Tab title="待提/收货">
                <div class="shop-order-list" v-if="orderList.length > 0">
                    <template v-for="(item, index) in orderList">
                        <OrderListItem :key="index" :itemInfo="item" @refreshList="getDataList" />
                    </template>
                </div>
                <Empty v-else type="order" msg="暂无待提/收货订单" :mode="mode" />
            </Tab>
            <Tab title="售后">
                <div class="shop-order-list" v-if="afterSaleOrderList.length > 0">
                    <template v-for="(item, index) in afterSaleOrderList">
                        <AfterSaleListItem :key="index" :itemInfo="item" @refreshList="getDataList" />
                    </template>
                </div>
                <Empty v-else type="order" msg="暂无售后订单" :mode="mode" />
            </Tab>
        </Tabs>
        <!-- <GoBack :haveFooter="false" :isCustomer="true" @back="gotoShopIndex" /> -->
    </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { Tab, Tabs, Row, Col } from 'vant';
import { Empty } from '@components/base';
import { GoBack } from '@components/biz';
import OrderListItem from './order/OrderListItem';
import AfterSaleListItem from './aftersale/AfterSaleListItem';
import { repalceTo, setTitle } from '@common/utils';
import { getUiMode, getUiTheme, getUiStyleMode } from '@biztools/info';
import { DEFAULT_MODE, DEFAULT_THEME, DEFAULT_STYLE_MODE } from '@constants/style';
import { TipLoading, ClearTip } from '@common/tip';
import EventBus from '@common/eventBus';
// mock
import logger from '@common/logger';
export default {
    name: 'OrderList', // 订单列表
    components: {
        Tab,
        Tabs,
        Row,
        Col,
        OrderListItem,
        AfterSaleListItem,
        Empty,
        GoBack,
    },
    data() {
        return {
            active: 0,
            // 获取设置的配置信息
            mode: getUiMode() || DEFAULT_MODE,
            theme: getUiTheme() || DEFAULT_THEME,
            styleMode: getUiStyleMode() || DEFAULT_STYLE_MODE,
        };
    },
    computed: {
        ...mapState({
            orderList: state => state.shopOrder.orderList,
            afterSaleOrderList: state => state.shopOrder.afterSaleOrderList,
        }),
    },
    created() {
        setTitle('订单列表');
        EventBus.$on('RefreshShopOrderList', this.getDataList);
    },
    async mounted() {
        TipLoading('加载中...');
        await this.getShopOrderList({
            category: 0,
        });
        const el = document.querySelector('.shop-order-list');
        el && el.addEventListener('scroll', async () => {
            const top = el.scrollTop;
            const height = el.scrollHeight;
            const cHeight = document.documentElement.clientHeight;
            const isSole = height === top + cHeight;
            if (isSole) {
                await this.getNextPage();
            }
        }, false);
        // 获取用户信息
        // await this.getShopMemberInfo();
        ClearTip();
    },
    methods: {
        ...mapActions([
            'getShopMemberInfo',
            'getShopOrderList',
            'getShopOrderListNext',
            'getAfterSaleOrderList',
            'getAfterSaleOrderListNext',
        ]),
        async tabChagneAction(index) {
            logger.info('ShopOrderList => tab切换', index);
            TipLoading('加载中...');
            await this.getDataList();
            ClearTip();
        },
        async getDataList() {
            TipLoading('加载中...');
            if (this.active === 4) {
                // 获取售后订单列表
                await this.getAfterSaleOrderList();
            } else {
                await this.getShopOrderList({
                    category: this.active,
                });
            }
            ClearTip();
        },
        async getNextPage() {
            TipLoading('加载中...');
            if (this.active === 4) {
                await this.getAfterSaleOrderListNext();
            } else {
                await this.getShopOrderListNext();
            }
            ClearTip();
        },
        gotoShopIndex() {
            repalceTo('shop');
        },
    },
};
</script>

<style lang="less">
.tech-shop-order-list {
    &.black {
        background-color: #000000;
        .van-tab {
            background-color: @black-bg-color;
            color: @tip-color;
            &.van-tab--active {
                color: @black-title-color;
            }
        }
    }
    .shop-order-list {
        height: 100vh;
        overflow-x: hidden;
        overflow-y: auto;
    }
    .list-tabs {
        width: 100%;
        .tech-page-empty{
            height: calc(100vh - 44px);
        }
        .van-tabs__wrap--scrollable .van-tab {
            flex: 0 0 20%;
        }
        .van-tabs__line {
            border-radius: 2px;
            height: 4px;
        }
        // .van-tab__pane {
        //     .p-b(@shop-gap-md);
        // }
    }
}
</style>
